<template>
	<view>
		<view class="recordList">
			<view class="list-item" v-for="item in recordList" :key="item.id">
				<view class="item-code">
					{{item.code}}
				</view>
				<view class="item-name">
					<view class="left">
						{{item.vip.name}}
					</view>
					<view class="right">
						实付款:￥{{item.money}}
					</view>
				</view>
				<view class="item-date">
					<view class="left">
						购买日期:{{item.createtime | dateFormat}}
					</view>
					<view class="right">
						到期日期:{{item.lasttime | dateFormat}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: [],
				recordList: [],
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.userData = uni.getStorageSync('userData');
			this.getUserViprecord()
		},
		methods: {
			getUserViprecord() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/user/user/vipRecord',
					method: 'POST',
					data: {
						busid: this.userData.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.recordList = res.data.data
					}
				});
			}
		},
		filters: {
			dateFormat: function(val) {// 格式化时间
				const dt = new Date(val*1000)
				const y = dt.getFullYear()
				const m = dt.getMonth() +1
				const d = dt.getDate()
				 
				return `${y}-${m}-${d}`
			},
		}
	}
</script>

<style lang="scss">
page {
	background-color: #eeeeee;
}
.recordList {
	width: 100%;
	.list-item {
		width: 90%;
		height: 210rpx;
		margin: 10rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		font-size: 16px;
		.item-code {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			margin-left: 15rpx;
		}
		.item-name {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			.left {
				width: 50%;
				height: 70rpx;
				margin-left: 15rpx;
			}
			.right {
				width: 50%;
				height: 70rpx;
				text-align: right;
				margin-right: 15rpx;
			}
		}
		.item-date {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			.left {
				width: 50%;
				height: 70rpx;
				margin-left: 15rpx;
			}
			.right {
				width: 50%;
				height: 70rpx;
				text-align: right;
				margin-right: 15rpx;
			}
		}
	}
}
</style>
